<template>
  <VPrint ref="printRef" id="printDetail" title="采购明细" width="1340px" font-size="12px">
    <div class="flex flex-col text-gray-950">
      <div class="border-l border-t border-r px-2">
        <div class="text-center font-bold" style="font-size: 30px;">采购明细<span class="text-lg inline-block ml-2">付款单号: {{
          form.payment.payment_no
        }}</span>
        </div>
      </div>
      <div class="border-l border-t border-r p-2">
        <div class="font-bold" style="font-size: 22px;">订单明细</div>
      </div>
      <div class="flex w-full border-r">
        <div class="grid grid-cols-11 flex-1">
          <div class="border-l border-t p-2 col-span-2">采购单号</div>
          <div class="border-l border-t p-2  col-span-2">合同编号</div>
          <div class="border-l border-t p-2">系统SKU</div>
          <div class="border-l border-t p-2">供应商名称</div>
          <div class="border-l border-t p-2">下单人员</div>
          <div class="border-l border-t p-2">货品名称</div>
          <div class="border-l border-t p-2">数量</div>
          <div class="border-l border-t p-2">单价(RMB)</div>
          <div class="border-l border-t p-2">金额(RMB)</div>
        </div>
        <div class="grid grid-cols-10" style="flex: 0 0 440px">
          <div class="border-l border-t p-2 col-span-2">下单时间</div>
          <div class="border-l border-t p-2 col-span-2">交货时间</div>
          <div class="border-l border-t p-2 col-span-3">入库仓库</div>
          <div class="border-l border-t p-2 col-span-3">采购备注</div>
        </div>
      </div>
      <div class="flex w-full border-r" v-for="(d, i) in form.detail" :key="i">
        <div class="grid grid-cols-11 flex-1">
          <div class="border-l border-t p-2 col-span-2">{{ d.purchase_no }}</div>
          <div class="border-l border-t p-2 col-span-2">{{ d.payment_no }}</div>
          <div class="border-l border-t p-2">{{ d.sku }}</div>
          <div class="border-l border-t p-2">{{ d.supplier_name }}</div>
          <div class="border-l border-t p-2">{{ d.purchase_user_name }}</div>
          <div class="border-l border-t p-2">{{ d.sku_cn_title }}</div>
          <div class="border-l border-t p-2">{{ d.purchase_num }}</div>
          <div class="border-l border-t p-2">{{ d.is_drawback ? d.unit_price_tax : d.unit_price }}</div>
          <div class="border-l border-t p-2">{{ d.is_drawback ? d.total_purchase_price_tax : d.total_purchase_price
          }}</div>
        </div>
        <div class="grid grid-cols-10" style="flex: 0 0 440px">
          <div class="border-l border-t p-2 col-span-2">{{ d.create_time }}</div>
          <div class="border-l border-t p-2 col-span-2">{{ d.expect_delivery_time }}</div>
          <div class="border-l border-t p-2 col-span-3">{{ d.destination_warehouse_name }}</div>
          <div class="border-l border-t p-2 col-span-3">{{ d.purchase_remark }}</div>
        </div>
      </div>
      <div class="flex w-full border-r border-b h-24">
        <div class="grid grid-cols-11 flex-1">
          <div class="border-l border-t p-2 col-span-2 flex items-center justify-center">
            <div class="font-bold" style="font-size: 20;">甲方信息</div>
          </div>
          <div class="border-l border-t p-2 col-span-9">
            <div class="font-bold" style="font-size: 20px;">
              <div>经办人签字: </div>
              <div>负责人签字: </div>
              <div>单位盖章: </div>
              <div>日期: </div>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-10" style="flex: 0 0 440px">
          <div class="border-l border-t p-2 col-span-2 flex items-center justify-center">
            <div class="font-bold" style="font-size: 20;">乙方信息</div>
          </div>
          <div class="border-l border-t p-2 col-span-8">
            <div class="font-bold" style="font-size: 24px;">
              <div>经办人签字: </div>
              <div>负责人签字: </div>
              <div>单位盖章: </div>
              <div>日期: </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </VPrint>
</template>

<script setup>
import VPrint from '@/components/VPrint'
import api from '../api'

const form = ref({ payment: {}, detail: [] })
const printRef = ref()
const getForm = async (p_id) => {
  const res = await api.printDetail({ p_id })
  form.value = res.data
}
const view = (p_id) => {
  printRef?.value.view()
  getForm(p_id)
}
const print = async (p_id) => {
  await getForm(p_id)
  printRef?.value.print()
}

const footerColspanMethod = ({ $rowIndex, _columnIndex }) => {
  if ($rowIndex === 0) {
    if (_columnIndex === 1) {
      return {
        rowspan: 1,
        colspan: 2
      }
    } else if (_columnIndex === 2) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}

const meanNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count / list.length
}

const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count
}

const footerMethod = ({ columns, data }) => {
  const footerData = [
    columns.map((column, _columnIndex) => {
      if (_columnIndex === 0) {
        return '平均'
      }
      if (['payment_no', 'sku'].includes(column.field)) {
        return meanNum(data, 'payment_no')
      }
      if (['name'].includes(column.field)) {
        return '合并了'
      }
      if (['content'].includes(column.field)) {
        return '合并了'
      }
      return null
    }),
    columns.map((column, _columnIndex) => {
      if (_columnIndex === 0) {
        return '和值'
      }
      if (['payment_no', 'sku'].includes(column.field)) {
        return sumNum(data, 'payment_no')
      }
      return null
    })
  ]
  return footerData
}

defineExpose({ view, print })
</script>